Handling Multiple Renders

Follow Us On

‎

RidgeRun GStreamer Browser Sink

Table of Contents [Sticky]

Handling Multiple Renders

GStreamer Browser Sink can handle multiple renders. To achieve this in the index.html you can create the number of streams you want. You only need to take into account the following.

1. Add a video element in the browser for each stream you want to render.

2. Create a script module for each video element, where you initialize a new RrBrowserSink instance and connect it to the desired stream URL.

Feel free to adjust the number of video elements and scripts depending on how many streams you want to show.

Example

The following example shows how to apply render two videos.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>RidgeRun GStreamer Browser Sink</title>
        <style>
            body {
                background: #f8f9fa;
                font-family: Arial, sans-serif;
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: 100vh;
            }
            .browser-video {
                width: 100%;
                max-width: 640px;
                margin-top: 40px;
                box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
                border-radius: 8px;
                background: #000;
            }
            .page-title {
                margin-top: 40px;
                font-size: 2rem;
                font-weight: 600;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <h1 class="page-title">RidgeRun GStreamer Browser Sink</h1>

        <!-- Stream 1 -->
        <video
            id="camera"
            autoplay
            playsinline
            controls
            class="browser-video"
        ></video>

        <script type="module">
            import { RrBrowserSink } from "./rrbrowsersink.js";

            const sinkA = new RrBrowserSink();
            sinkA.connect("camera", "http://<IP>:8080/endpoint1");
        </script>

        <!-- Stream 2 -->
        <video
            id="camera1"
            autoplay
            playsinline
            controls
            class="browser-video"
        ></video>

        <script type="module">
            import { RrBrowserSink } from "./rrbrowsersink.js";

            const sinkB = new RrBrowserSink();
            sinkB.connect("camera1", "http://<IP>:8082/endpoint1");
        </script>
    </body>
</html>

Note

Note: Make sure that the port is different for each video element to be able to render it. The endpoint can have the name you like.

Now you can stream to the browser using the port, address and the endpoint defined in the .html above.

gst-launch-1.0 videotestsrc ! videoconvert ! queue !     x264enc speed-preset=ultrafast tune=zerolatency key-int-max=30 !     h264parse ! rrbrowsersink address=$IP endpoint=endpoint1 port=8080

gst-launch-1.0 autovideosrc ! videoconvert ! queue !     x264enc speed-preset=ultrafast tune=zerolatency key-int-max=30 !     h264parse ! rrbrowsersink address=$IP endpoint=endpoint1 port=8082

Warning

Warning: You only need to run one pipeline pointing to the .html file. All additional pipelines can be executed from anywhere else.

❯

Share This Page

Handling Multiple Renders

Example